<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级选择器</title>
    <style>
        .p1::first-line {
            color: red;
            text-decoration: underline green;
        }

        .b1 {
            width: 300px;
            height: 300px;
            background-color: rgb(214, 240, 180);
        }

        .b1::before {
            /* content:'before box '; */
            /* content: url(./img/vanGogh.jpg); */
            /* content: attr(title); */
            content: '';
            display: block;
            width: 50px;
            height: 50px;
            background-color: green;
        }

        .b1::after {
            /* content:'before box '; */
            /* content: url(./img/vanGogh.jpg); */
            /* content: attr(title); */
            content: '';
            display: block;
            width: 50px;
            height: 50px;
            background-color: green;
        }

        /* .s1>:first-child{
            color: red;
        } */
        .s1 :last-child {
            color: blue;
        }

        /* .wrap h3:first-of-type{
            border: 1px solid red;
        } */
        .wrap :only-child {
            color: red;
        }
        .b3 .p5:only-child{
            color: green;
        }
        /* .s5 :nth-child(2){
            color: red;
        } */
        /* .s5 :nth-child(even){
            color: red;
        } */
        .s5 :nth-child(3n-1){
            color: red;
        }
        .s5 :nth-child(3n-2){
            color: blue;
        }
    </style>
</head>

<body>
    <p class="p1">天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。 </p>
    <div class="b1" title="hehe">
        <p>i am box</p>
    </div>
    <section class="s1">
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <div>
            <p>江山如此多娇，引无数英雄竞折腰。</p>
        </div>
        <div>
            <p>江山如此多娇，引无数英雄竞折腰。</p>
        </div>
    </section>
    <hr>
    <div class="wrap">
        <section>
            <h3>江山如此多娇，引无数英雄竞折腰。</h3>
            <h3>江山如此多娇，引无数英雄竞折腰。</h3>
            <p>江山如此多娇，引无数英雄竞折腰。</p>
            <p>江山如此多娇，<i>引</i>无数英雄竞折腰。</p>
        </section>
        <hr width="80%" color="red">
        <article>
            <h3>江山如此多娇，引无数英雄竞折腰。</h3>
            <h3>江山如此多娇，引无数英雄竞折腰。</h3>
            <p>江山如此多娇，引无数英雄竞折腰。</p>
            <p>江山如此多娇，引无数英雄竞折腰。</p>
        </article>
    </div>
    <div class="b3">
        <section>
            <p class="p4">p1</p>
        </section>
        <section>
            <h3 class="p5">p2</h3>
        </section>
    </div>
    <section class="s5">
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
        <p>江山如此多娇，引无数英雄竞折腰。</p>
    </section>
</body>

</html>